<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box" style="min-height: 900px;">
      <h6 class="common-title">修改交易密码</h6>
      <div class="myorderbox common-form-set">
        <form
          class="layui-form password-update-form">
          <div class="layui-form-item">
            <label class="layui-form-label">原交易密码</label>
            <div class="layui-input-inline" style="width:300px;" >
              <input placeholder="请输入原交易密码" type="password" name="qq" v-model="passwordInfo.oldPassword" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">新交易密码</label>
            <div class="layui-input-inline" style="width:300px;" >
              <input placeholder="请输入新交易密码" type="password" name="qq" v-model="passwordInfo.password" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">重复新密码</label>
            <div class="layui-input-inline" style="width:300px;" >
              <input placeholder="请再次输入新交易密码" type="password" name="qq" v-model="confirmPassword" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
              <button
                class="layui-btn layui-btn-sm"
                @click.prevent="modify">
                确认修改
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import pageMixin from '@/mixins/page'
import { mapState } from 'vuex'
export default {
  layout: 'webIn4',
  components: {

  },
  mixins: [pageMixin],
  data() {
    return {
      isLoading: false,
      passwordInfo: {
        password: '',
        oldPassword: '',
      },
      confirmPassword: ''
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  async mounted() {
    this.isLoading = true

    this.isLoading = false
  },
  methods: {
    async modify() {
      if(this.confirmPassword !== this.passwordInfo.password) {

        return
      }
      const res = await this.$axios.post('/user/user/userTransactionPassword', this.passwordInfo)
      if (res.code === 1001) {
        this.$message.success('密码修改成功')
        this.passwordInfo.password = ''
        this.passwordInfo.oldPassword = ''
        this.confirmPassword = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>


// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';

</style>

<style lang="scss">
.usercenter-box .self-update-form {
  margin-left: 70px;
  .el-form-item {
    label {
      min-width: 100px;
    }
  }
}
</style>
